<template>
  <div class="m-news-detail">
    <!-- 图文详情 -->
    <div class="m-container">
      <div class="article-title">{{ articleDetail.title }}</div>
      <div class="artInfo">
        <div class="view-area">
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/time.png" />
          <span>{{ $t("time") }}：</span>
          <span>{{ articleDetail.releaseTime }}</span>
        </div>
        <div class="view-area margin-l">
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/hit.png" />
          <span>{{ $t("hits") }}：</span>
          <span>{{ articleDetail.viewCount }}</span>
        </div>
      </div>
      <div class="article-content" v-html="contentDetail"></div>
    </div>
    <!-- WhatsApp -->
    <!-- <WhatsAppM v-if="locale == 'en-US'" /> -->
    <!-- 底部信息 -->
    <FooterM></FooterM>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "M-newsDetail",
  layout: "mobile",
  components: {},
  data() {
    return {}
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        }
      ]
    }
  },
  async asyncData({ app, params }) {
    let paramsRes = params.detailParams
    console.log("paramsRes", paramsRes)
    let categoryId = paramsRes
    let articleDetail = null,
      contentDetail = ""
    try {
      let { data } = await app.$api.articleDetail({ id: categoryId })
      articleDetail = data
      contentDetail = data.content
    } catch (error) {
      console.log(error)
    }
    return {
      articleDetail,
      contentDetail
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.getPoint()
  },
  methods: {
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.m-news-detail {
  padding-top: 260px;
  .article-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 82px;
    color: #333;
    line-height: 123px;
    text-align: center;
  }
  .artInfo {
    padding: 0 0 50px;
    border-bottom: 2px solid #d9d9d9;
    text-align: center;
    margin: 50px 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .view-area {
      display: flex;
      align-items: center;
      span {
        font-size: 48px;
        color: #666666;
        line-height: 80px;
        margin-left: 20px;
      }
      &::after {
        content: "";
        display: block;
        height: 8px;
        background: #cbcbcb;
        width: 400px;
        position: absolute;
        bottom: -8px;
        left: 50%;
        margin: 0 0 0 -200px;
        z-index: 1;
      }
    }
    .margin-l {
      margin-left: 40px;
    }
  }
  .article-content {
    margin-top: 50px;
    ::v-deep img {
      display: inline-block;
    }
    ::v-deep video {
      width: 100%;
    }
  }
}
</style>
